<template>
  <div class="icon-item common-flex-align-center" :style="{ gap: `${options.gap}px` }">
    <img
      v-if="type === 'img'"
      :style="{ color: options.iconColor, height: `${options.iconSize || 16}px` }"
      :src="icon"
      alt=""
    />
    <svg-icon
      v-else
      :style="{ color: options.iconColor, width: `${options.iconSize || 16}px`, height: `${options.iconSize || 16}px` }"
      :name="icon"
    ></svg-icon>
    <div v-if="!options.slot" class="value" :style="{ fontSize: `${options.size}px`, color: options.color }">
      {{ value }}
    </div>
    <slot v-else></slot>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue';

interface IOptions {
  iconSize?: Number;
  iconColor?: string;
  size?: number;
  color?: string;
  gap?: number;
  slot?: boolean;
}

type IType = 'svg' | 'img';

defineProps({
  icon: {
    type: String,
    default: '',
  },
  value: {
    type: String,
    default: '',
  },
  type: {
    type: String as PropType<IType>,
    default: 'svg',
  },
  options: {
    type: Object as PropType<IOptions>,
    default: () => {
      return { iconSize: 16, iconColor: '', size: 14, color: '', gap: 6, slot: false } as IOptions;
    },
  },
});
</script>

<style lang="less" scoped>
.icon-item {
  gap: 6px;

  .value {
    font-size: 14px;
    color: #31373d;
  }
}
</style>
